{extend name="public/base" /}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
			<div class="widget-head">
				<div class="widget-title a m-cf">模板详情</div>
			</div>
			<div class="widget-body layui-col-sm12 layui-col-md12 layui-col-lg12">
				<form id="my-form" class="layui-form" method="post">
					<div class="layui-form-item">
						<label class="layui-form-label form-require">物流公司 </label>
						<div class="layui-input-block">
							<select name="company_id" >
								<option value="">请选择</option>
								{volist name="express" id="item"}
                        		<option value="{$item.id}" {if condition="$info.company_id eq $item.id"}selected="selected"{/if}>{$item.name}
                        		</option>
                        		{/volist}
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label form-require">模版名称 </label>
						<div class="layui-input-block">
							<input type="text" class="layui-input" name="name" value="{$info['name']}" required>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label form-require">排序 </label>
						<div class="layui-input-block">
							<input type="text" class="layui-input" name="sort" value="{$info['sort']|default='0'}" required>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label form-require">计费方式 </label>
						<div class="layui-input-block">
							<input type="radio" name="type" lay-filter="type" value="1" title="按件数" {eq name="info['type']" value="1"}checked{/eq}>
                    		<input type="radio" name="type" lay-filter="type" value="2" title="按重量" {eq name="info['type']" value="2"}checked{/eq}>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label form-require">配送区域 </label>
						<div class="layui-input-block">
							<table width="100%" class="layui-table">
								<thead>
									<tr>
										<th width="42%">可配送区域</th>
										<th><span class="first">首件(个)</span></th>
										<th>运费(元)</th>
										<th><span class="next">续件(个)</span></th>
										<th>续费(元)</th>
									</tr>
								</thead>
								<tbody class="layui-tbody">
									{volist name="info.rule" id="item"}
									<tr>
										<td>
											<p class="select-content">{$item.region}</p>
											<p class="operation">
												<a class="edit">编辑</a>
												<a class="del">删除</a>
											</p>
											<input type="hidden" name="rule[region][]" value="{$item.region}">
										</td>
										<td><input type="number" class="layui-input" name="rule[first][]" value="{$item.first}" required></td>
										<td><input type="number" class="layui-input" name="rule[first_fee][]" value="{$item.first_fee}" required></td>
										<td><input type="number" class="layui-input" name="rule[next][]" value="{$item.next}" required></td>
										<td><input type="number" class="layui-input" name="rule[next_fee][]" value="{$item.next_fee}" required></td>
									</tr>							
									{/volist}		
									<tr>
										<td colspan="5">
											<a class="add-region layui-btn" href="javascript:;">
												<i class="iconfont icon-dingwei"></i>点击添加可配送区域和运费
											</a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>					
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="hidden" name="id" value="{$info.id}">
							<button class="layui-btn" lay-filter="*" lay-submit="">保存</button>
                    		<button class="layui-btn layui-btn-primary" onclick="javascript:history.back(-1);return false;">返回</button>
						</div>						
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div class="test-div" style="display: none; padding: 20px;"></div>
{/block}
{block name="style"}
<link rel="stylesheet" href="/static/admin/css/RegionalChoice.css">
<style type="text/css">
.select-content {margin-bottom: 10px;}
.operation {margin-bottom: 10px; text-align: right;}
.operation a {margin: 5px; cursor: pointer;}
</style>
{/block}
{block name="js"}
<script src="/static/admin/js/RegionalChoice.js"></script>
<script>
	form.on('radio(type)', function(data){
  		if(data.value == 1){
  			$('.first').text('首件(个)');
  			$('.next').text('续件(个)');
  		}else{
  			$('.first').text('首件(KG)');
  			$('.next').text('续件(KG)');
  		}
	});
	
	//------生成地区
    GetRegionPlug();
	$('.add-region').click(function(){
		layer.open({
			type: 1,
            shade: false,
            title: '选择可配送区域',
            btn: ['确定', '取消'],
            area: ['1080px', '520px'], //宽高
            content: $('.test-div'),
            yes: function (index) {
            	var areas = GetChecked().join(",");//已选择的城市名
            	bindRule(areas, areas);
            	//$("#areas").html(areas);//显示在页面
            	//$("#selectedareas").val(areas);//存入隐藏的input
            	$('.test-div').css('display','none');            	
                layer.close(index);
            },
            end: function(){
            	$('.test-div').css('display','none');
            }
		});
	});

	$('.layui-table').on('click','.del',function(){
		var _this = $(this);
        layer.confirm('确定要删除吗？', function (index) {
            _this.parents('tr').remove();
            layer.close(index);
        });
	});

	$('.layui-table').on('click','.edit',function(){
		var _this = $(this);
		layer.open({
			type: 1,
            shade: false,
            title: '选择可配送区域',
            btn: ['确定', '取消'],
            area: ['820px', '520px'], //宽高
            content: '',
            yes: function (index) {
            	bindRule('',0);
            	layer.close(index);
            }
        });
	});

	function bindRule(region, ids){
		var html = '<tr>';
        html = html + '<td><p class="select-content">'+ region +'</p>';
        html = html + '<p class="operation"><a class="edit">编辑</a>';
        html = html + '<a class="del">删除</a></p>';
        html = html + '<input type="hidden" name="rule[region][]" value="' + ids + '"></td>';
        html = html + '<td><input type="number" class="layui-input" name="rule[first][]" value="1" required></td>';
        html = html + '<td><input type="number" class="layui-input" name="rule[first_fee][]" value="1.00" required></td>';
        html = html + '<td><input type="number" class="layui-input" name="rule[next][]" value="1" required></td>';
        html = html + '<td><input type="number" class="layui-input" name="rule[next_fee][]" value="1.00" required></td>';
        html = html + '</tr>';
        $('.layui-table').children('.layui-tbody').find('tr:last').before(html);
	}	
</script>
{/block}